<template>
  <div class="data-statistics c6-container">
    <ContentForm name="4C检测数据" :isshowref="isshowrefresh">
      <div slot="valueform" class="tableContainer widthPage v-flex-elastic" :class="{ foremZank: isActive }" style="height: calc(100%);">
        <filter-form :form="listQuery" :data="filterData" only-query @search="search">
          <el-button class="refresh-btn" size="mini" type="primary" icon="el-icon-refresh" @click="resetListQuery">重置</el-button>
        </filter-form>
        <div style="height: calc(100% - 37px);">
          <el-table
            v-loading="this.tableData.loading"
            :data="tableData.tableList"
            height="100%"
            border
            stripe>
            <el-table-column
              label="序号"
              type="index"
              width="50"
              align="center" />
            <el-table-column
              prop="deptName"
              label="供电段"
              sortable
              width="100"
              top
              align="center" />
            <el-table-column
              prop="seclineName"
              label="线路"
              sortable
              width="120"
              align="center" />
            <el-table-column
              prop="directionName"
              label="行别"
              align="center"
              sortable
              width="90" />
            <el-table-column
              prop="startSiteName"
              label="计划起站"
              align="center"
              sortable
              width="100" />
            <el-table-column
              prop="endSiteName"
              label="计划止站"
              align="center"
              sortable
              width="100" />
            <el-table-column
              prop="detectDate"
              label="检测日期"
              sortable
              width="120"
              top
              align="center" />
            <el-table-column
              prop="packetName"
              label="数据包"
              sortable
              show-overflow-tooltip
              align="center" />
            <el-table-column
              prop="packageSize"
              width="90"
              label="数据包大小（KB）"
              align="center">
              <template slot-scope="scope">
                <el-popover trigger="hover" placement="bottom">
                  <p>{{ scope.row.packageSize }}</p>
                  <div slot="reference">
                    {{ scope.row.packageSize }}
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              width="80"
              align="center"
              fixed="right">
              <template slot="header">
                操作
              </template>
              <template slot-scope="scope">
                <a class="el-icon-view" @click="showDetail(tableData.tableList[scope.$index])" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <Pagination
            :hidden="false"
            :total="tableData.total"
            :page.sync="listQuery.page"
            :size.sync="listQuery.size"
            @pagination="getTableData" />
        </div>
      </div>
    </ContentForm>
    <div class="phm-tanc workListTab" :class="{ phmtancshow: isActive }">
      <p class="phm-tanc-top">
        <span class="el-icon-close" @click="isActive=!isActive" />4C数据查看
      </p>
      <A4C :show-pillar-pager="true" style="height: calc(100% - 42px);" :detect-job-id="detectJobId" />
    </div>
  </div>
</template>

<script>
// 检测数据查询
import A4C from './A4cAnalysisCopy.vue'
import { get4cDetectData } from '@/api/cms/detect-data'
import { findManageUnitDeptList, getLineList, getDirectionList } from '@/api/platform'
import ContentForm from '@/components/ContentForm'
import { parseTime } from '@/utils'
export default {
  components: {
    A4C,
    ContentForm
  },
  data() {
    return {
      isshowrefresh: true,
      isActive: false,
      filterData: {
        deptId: {
          width: 'auto',
          clearable: true,
          key: 'deptCode',
          type: 'select',
          title: '单位',
          placeholder: '请选择单位',
          options: [],
          props: { label: 'deptName', value: 'deptNo' },
          changeFn: (vm) => {
            if (vm) {
              getLineList({ unitDeptCode: vm }).then(response => {
                this.filterData.lineId.options = Object.freeze(response.data)
              })
            }
          }
        },
        directionId: {
          width: 'auto',
          clearable: true,
          key: 'directionId',
          type: 'select',
          title: '行别',
          placeholder: '请选择行别',
          options: [],
          props: {
            label: 'directionName',
            value: 'directionId'
          }
        },
        lineId: {
          width: 'auto',
          clearable: true,
          key: 'lineId',
          type: 'select',
          title: '线路',
          placeholder: '请选择线路',
          options: [],
          props: { label: 'seclineName', value: 'seclineId' }
        },
        beginDate: {
          width: 'auto',
          key: 'beginDate',
          type: 'date',
          dateType: 'date',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '请选择开始时间'
        },
        endDate: {
          width: 'auto',
          key: 'endDate',
          type: 'date',
          dateType: 'date',
          valueFormat: 'yyyy-MM-dd',
          placeholder: '请选择结束时间'
        }
      },
      listQuery: {
        unitDeptCode: null,
        lineId: '',
        directionId: '',
        beginDate: '',
        endDate: '',
        page: 1,
        size: 20
      },
      tableData: {
        total: 0,
        tableList: [],
        loading: false
      },
      detectJobId: '',
      parseTime: parseTime
    }
  },
  mounted() {
    this.initPage()
    this.search()
  },
  methods: {
    initPage() {
      // 获取单位 deptList
      findManageUnitDeptList({}).then(response => {
        var resData = response.data
        for (var i in resData) {
          if (resData[i].deptNo === '001200') {
            resData.splice(i, 1)
          }
        }
        this.filterData.deptId.options = Object.freeze(resData)
      })
      // 获取行别
      getDirectionList({}).then(res => {
        this.filterData.directionId.options = Object.freeze(res.data)
      })
      // 获取线路
      getLineList().then(response => {
        this.filterData.lineId.options = Object.freeze(response.data)
      })
    },
    search() {
      this.getTableData()
    },
    resetListQuery() {
      this.listQuery = {}
      this.getTableData()
    },
    getTableData() {
      this.tableData.loading = true
      get4cDetectData(this.listQuery).then(res => {
        this.tableData.total = res.data.total
        this.tableData.tableList = res.data.records
        this.tableData.loading = false
      })
    },
    showDetail(val) {
      this.detectJobId = val.id + '_' + val.startSiteName + '_' + val.endSiteName + '_' + val.detectDate
      this.isActive = !this.isActive
    }
  }
}
</script>
